<template>
  <div class="user-order-list">
    <div class="user-com-tab">
      <span
        class="item"
        :class="orderStatus == 0 ? 'on' : ''"
        @click="statusClick(0)"
        >{{ $t(`page.users.orderList.orderStatus[0].name`) }}({{
          orderData.unPaidCount || 0
        }})</span
      >
      <span
        class="item"
        :class="orderStatus == 1 ? 'on' : ''"
        @click="statusClick(1)"
        >{{ $t(`page.users.orderList.orderStatus[1].name`) }}({{
          orderData.unShippedCount || 0
        }})</span
      >
      <span
        class="item"
        :class="orderStatus == 2 ? 'on' : ''"
        @click="statusClick(2)"
        >{{ $t(`page.users.orderList.orderStatus[2].name`) }}({{
          orderData.receivedCount || 0
        }})</span
      >
      <span
        class="item"
        :class="orderStatus == 3 ? 'on' : ''"
        @click="statusClick(3)"
        >{{ $t(`page.users.orderList.complete`) }}({{
          orderData.completeCount || 0
        }})</span
      >
    </div>
    <div v-loading="loading" class="width100">
      <!-- <div v-if="orderStatus === 1 && $auth.user.isSyn" class="acea-row row-middle mb15">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('page.goodsAddcart.selectAll')}}</el-checkbox>
        <el-button style="margin-left: 10px;" @click="setStorageFunc">{{$t('page.users.orderList.setStorage')}}</el-button>
      </div> -->
      <div v-if="orderList.length > 0">
        <div
          v-for="(itemn, index) in orderList"
          :key="itemn.id"
          class="order-list"
        >
          <template v-if="orderStatus === 0">
            <div v-for="(item, index) in itemn.orderList" :key="index">
              <div class="bd">
                <div
                  class="order-txt acea-row row-middle"
                  @click="goMerchant(item)"
                >
                  <div class="acea-row row-middle">
                    <span class="mr10 iconfont icon-shangjiadingdan"></span>
                    <div class="name mr10">{{ item.merName }}</div>
                    <span
                      class="iconfont icon-gengduo"
                      style="font-size: 10px"
                    ></span>
                  </div>
                  <div
                    class="offline"
                    v-if="itemn.payType === 'offline'"
                    style="float: right"
                  >
                    {{ offlinePayStatusName[itemn.offlinePayStatus] }}
                  </div>
                </div>
                <div class="content" @click="goDetail(itemn)">
                  <div
                    class="goods-item"
                    v-for="(goods, index) in item.orderInfoList"
                    :key="index"
                  >
                    <div class="acea-row">
                      <div class="img-box">
                        <el-image
                          class="img"
                          :src="goods.image"
                          fit="scale-down"
                        ></el-image>
                      </div>
                      <div class="info-txt">
                        <div class="title line2">{{ goods.productName }}</div>
                      </div>
                    </div>
                    <div class="info-price">
                      <div class="price">
                        <statistic
                          :valueStyle="{ color: '#999' }"
                          :value="goods.price"
                          :currency="goods.currency"
                        />
                      </div>
                      <div class="num">x{{ goods.payNum }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="bd">
              <div class="order-txt acea-row row-middle">
                <!-- <el-checkbox v-if="$auth.user.isSyn" :disabled="!!itemn.destWarehouseCode" style="margin-right: 0px;" @change="setOrdCheckbox(itemn,index)" v-model="itemn.radio">&nbsp;</el-checkbox> -->
                <div
                  class="acea-row row-middle"
                  style="flex: 1"
                  @click="goMerchant(itemn)"
                >
                  <span class="mr10 iconfont icon-shangjiadingdan"></span>
                  <div class="name mr10">{{ itemn.merName }}</div>
                  <span
                    class="iconfont icon-gengduo"
                    style="font-size: 10px"
                  ></span>
                </div>
              </div>
              <div class="content" @click="goDetail(itemn)">
                <div
                  class="goods-item"
                  v-for="(goods, index) in itemn.orderInfoList"
                  :key="index"
                >
                  <div class="acea-row">
                    <div class="img-box">
                      <el-image
                        class="img"
                        :src="goods.image"
                        fit="scale-down"
                      ></el-image>
                    </div>
                    <div class="info-txt">
                      <div class="title line2">{{ goods.productName }}</div>
                    </div>
                  </div>
                  <div class="info-price">
                    <div class="price">
                      <statistic
                        :valueStyle="{ color: '#999' }"
                        :value="goods.price"
                        :currency="goods.currency"
                      />
                    </div>
                    <div class="num">x{{ goods.payNum }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div class="foot">
            <p>
              {{ itemn.totalNum }} {{ $t(`page.users.orderList.item`) }}，{{
                $t(`page.users.orderList.totalPay`)
              }}
              <span class="price"
                ><statistic :value="itemn.payPrice" :currency="itemn.currency"
              /></span>
            </p>
            <div class="btn-wrapper">
              <div
                class="rest"
                v-if="!itemn.paid && itemn.offlinePayStatus !== 'doing'"
                @click="cancelOrder(index, itemn.orderNo)"
              >
                {{ $t(`page.users.orderList.cancelOrder`) }}
              </div>
              <div
                class="pay"
                v-if="!itemn.paid && itemn.offlinePayStatus !== 'doing'"
                @click="goPays(itemn)"
              >
                <span v-if="itemn.offlinePayStatus === 'pay_fail'">{{
                  $t("page.users.orderList.repay")
                }}</span>
                <span v-else>{{ $t(`page.users.orderList.pay`) }}</span>
              </div>
              <div
                class="pay"
                v-else-if="
                  itemn.status == 0 ||
                  itemn.status == 1 ||
                  itemn.status == 3 ||
                  itemn.offlinePayStatus === 'doing'
                "
                @click="goDetail(itemn)"
              >
                {{ $t(`page.users.orderList.viewDetails`) }}
              </div>
              <div
                class="rest"
                v-if="itemn.status == 3 && itemn.offlinePayStatus !== 'doing'"
                @click="delOrder(index, itemn.orderNo)"
              >
                {{ $t(`page.users.orderList.delete`) }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pages-box" v-if="total > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="bindPageCur"
          :total="total"
        >
        </el-pagination>
      </div>
      <div class="empty-box" v-if="orderList.length == 0 && !loading">
        <img src="~assets/images/noorder.png" alt="" />
        <p>{{ $t(`page.users.orderList.empty`) }}~</p>
      </div>
    </div>
    <setStorageDialogVue ref="setStorageDialogVue" @getList="getOrderList" />
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
import {
  goShopDetail,
  cancelOrders,
  delOrders,
  goPay,
  goMerchant,
} from "@/utils/order.js";
import { Debounce } from "@/utils/validate.js";
import setStorageDialogVue from "@/pages/users/setStorageDialog.vue";

export default {
  name: "order_list",
  auth: "guest",
  components: {
    setStorageDialogVue,
  },
  data() {
    return {
      orderStatus: 0,
      orderData: {},
      page: 1,
      limit: 10,
      total: 0,
      settingIndex: 0,
      orderList: [],
      loading: false,
      offlinePayStatusName: {
        doing: this.$t("offlinePayStatusName.doing"),
        pay_fail: this.$t("offlinePayStatusName.pay_fail"),
        need_pay: this.$t("offlinePayStatusName.need_pay"),
        has_pay: this.$t("offlinePayStatusName.has_pay"),
      },
      checkAll: false,
      isIndeterminate: false,
    };
  },
  async asyncData({ app, query }) {
    return {
      orderStatus: Number(query.orderStatus) || 0,
    };
  },
  head() {
    return {
      title: this.$t(`page.user.mineNav[0].name`),
    };
  },
  beforeMount() {
    this.getOrderData();
    if (this.orderStatus === 0) {
      this.getOrderAwaitPay();
    } else {
      this.getOrderList();
    }
  },
  mounted() {},
  methods: {
    handleCheckAllChange(val) {
      this.orderList.forEach((item, index) => {
        if (!item.destWarehouseCode) {
          this.$set(this.orderList[index], "radio", val);
        }
      });
      this.setOrdCheckbox();
    },
    setStorageFunc() {
      const orders = this.orderList
        .filter((item) => item.radio)
        .map((item) => item.orderNo);
      if (orders.length) {
        this.$refs.setStorageDialogVue.show(orders);
      } else {
        this.$message(this.$t("page.users.orderList.selectOrder"));
      }
    },
    setOrdCheckbox() {
      let len = this.orderList.length;
      let tagNum = 0;
      this.orderList.forEach((op) => {
        if (op.radio) tagNum++;
      });
      if (tagNum === 0) {
        this.checkAll = false;
        this.isIndeterminate = false;
      } else if (tagNum === len) {
        this.checkAll = true;
        this.isIndeterminate = false;
      } else {
        this.checkAll = false;
        this.isIndeterminate = true;
      }
    },
    goMerchant(item) {
      goMerchant(item.merId, this);
    },
    // 查看详情
    goDetail(item) {
      this.$router.push({
        path: `/order/order_detail`,
        query: {
          orderNo: item.orderNo,
          orderStatus: this.orderStatus,
        },
      });
    },
    statusClick(status) {
      this.orderStatus = status;
      this.getOrderData();
      if (this.orderStatus === 0) {
        this.getOrderAwaitPay();
      } else {
        this.getOrderList();
      }
    },
    /**
     * 支付
     */
    goPays: Debounce(function (item) {
      if (item.payType === "offline") {
        this.goDetail(item);
      } else {
        goPay(this, item);
      }
    }),
    /**
     * 取消订单
     */
    cancelOrder: Debounce(function (index, orderNo) {
      this.settingIndex = index;
      cancelOrders(this, orderNo).then(() => {
        this.orderList.splice(index, 1);
        this.$set(
          this.orderData,
          "unPaidCount",
          this.orderData.unPaidCount - 1
        );
      });
    }),
    /**
     * 删除订单
     */
    delOrder: Debounce(function (index, orderNo) {
      this.settingIndex = index;
      delOrders(this, orderNo).then(() => {
        this.orderList.splice(index, 1);
        this.$set(
          this.orderData,
          "completeCount",
          this.orderData.completeCount - 1
        );
      });
    }),
    /**
     * 待支付列表
     */
    getOrderAwaitPay: function () {
      let that = this;
      that.loading = true;
      that.$axios
        .get("/api/front/order/await/pay/list", {
          params: {
            page: this.page,
            limit: this.limit,
          },
        })
        .then((res) => {
          that.orderList = res.data.list;
          that.total = res.data.total;
          that.loading = false;
        })
        .catch((err) => {
          that.loading = false;
        });
    },
    /**
     * 获取订单列表
     */
    getOrderList: function () {
      let that = this;
      that.loading = true;
      that.$axios
        .get("/api/front/order/list", {
          params: {
            page: that.page,
            limit: that.limit,
            type: that.orderStatus,
          },
        })
        .then((res) => {
          that.orderList = res.data.list.map((item) => {
            item.radio = false;
            return item;
          });
          if (that.orderStatus === 1) that.setOrdCheckbox();
          that.total = res.data.total;
          that.loading = false;
        })
        .catch((err) => {
          that.loading = false;
        });
    },
    // 分页点击
    bindPageCur(data) {
      this.page = data;
      if (this.orderStatus === 0) {
        this.getOrderAwaitPay();
      } else {
        this.getOrderList();
      }
    },
    /**
     * 获取订单统计数据
     *
     */
    getOrderData() {
      this.$axios.get("/api/front/order/data").then((res) => {
        this.orderData = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.width100 {
  width: 100%;
  height: 100%;
}

.user-com-tab {
  background-color: #fff;
  padding: 0 30px;
  margin-bottom: 12px;
  border-radius: 8px;
  .item {
    padding: 0;
  }
}

.order-list {
  background-color: #fff;
  padding: 0 40px;
  margin-bottom: 12px;
  border-radius: 8px;
}

.user-order-list {
  width: 100%;
  height: 100%;
  li {
    position: relative;
    padding: 30px 0 26px;
    border-bottom: 1px solid #ececec;
  }
  .refund-icon {
    position: absolute;
    right: 50px;
    top: 40px;
  }
  .goods_item {
  }
  .bd {
    padding-top: 30px;
    cursor: pointer;
    border-bottom: 1px dashed #e1e1e1;
    .order-txt {
      color: #333333;
      font-size: 14px;
      justify-content: space-between;
      .mer_name {
        display: inline-block;
        color: #333333;
        &:hover {
          color: #00785e;
        }
      }
      .status {
        float: right;
        color: #00785e;
      }
    }
    .content {
      margin-top: 20px;
      .goods-item {
        display: flex;
        position: relative;
        margin-bottom: 20px;
        align-items: center;
        justify-content: space-between;
        .img-box {
          width: 160px;
          height: 160px;
          position: relative;
          border: 1px solid #d9dfe7;
          border-radius: 8px;
          span {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 12px;
            line-height: 18px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
          }
          .img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .info-price {
          text-align: right;
        }
        .info-txt {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 500px;
          margin-left: 30px;
          font-size: 14px;
          .title {
            color: #333;
          }
          .info {
            font-size: 12px;
            color: #aaa;
            margin-top: 4px;
          }
          .price {
            margin-top: 10px;
            color: $user--color-price;
          }
        }
        .develity_date {
          color: #fd6523;
          margin-top: 6px;
          font-size: 14px;
        }
        .price {
          color: #999999;
          margin-bottom: 6px;
        }
        .num {
          /*position: absolute;*/
          /*right: 0;*/
          /*top: 50%;*/
          transform: translateY(-50%);
          color: #999999;
        }
      }
    }
  }
  .foot {
    padding: 25px 0;
    p {
      text-align: right;
      color: #666;
      font-size: 14px;
      .price {
        color: $user--color-price;
      }
    }
    .btn-wrapper {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      div {
        width: 110px;
        height: 36px;
        text-align: center;
        line-height: 34px;
        margin-left: 20px;
        border: 1px solid #999999;
        border-radius: 4px;
        font-size: 14px;
        color: #666666;
        cursor: pointer;
        &.pay {
          border-color: #00785e;
          background: #00785e;
          color: #fff;
        }
      }
    }
  }
}

.pages-box {
  margin-top: 30px;
  text-align: right;
}
</style>
